<template>
    <ul class="effect-outer-box show-effect-box">
        <li class="group-attribute-name"
            @click="effectGroupName=!effectGroupName">
            <i class="group-icon" :class="effectGroupName ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"/>
            <span>展示效果</span>
        </li>
        <ul class="effect-inner-box" :class="{'h0': !effectGroupName}">
            <li class="attr-item">
                <div class="attr-item-label">展示效果</div>
                <div class="text-four-block">
                    <el-select v-model="effect.value"
                               style="width: 100%;"
                               size="mini"
                               placeholder="默认效果">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </li>
        </ul>
    </ul>
</template>

<script>
    export default {
        name: 'ShowEffect',
        props: {
            effect: {
                type: Object,
                default: _ => {
                    return {
                        value: ''
                    };
                }
            }
        },
        data() {
            return {
                effectGroupName: true,
                options: [
                    {label: '默认效果', value: ''},
                    {label: '顶部悬浮', value: 'top'},
                    {label: '底部悬浮', value: 'bottom'}
                ]
            };
        }
    }
</script>

<style scoped lang="scss">
    .effect-outer-box.show-effect-box {
        width: 100%;
        margin-top: 20px;
        padding-top: 12px;
        border-top: 1px solid rgba(0, 0, 0, .15);

        .h0 {
            height: 0 !important;
            overflow: hidden;
        }
        .group-attribute-name {
            height: 20px;
            width: fit-content;
            user-select: none;
            color: #999;
            cursor: pointer;

            .group-icon {
                font-size: 18px;
            }
        }
        .effect-inner-box {
            height: 48px;
            overflow: hidden;
            margin: 0;
            padding: 0;
            list-style: none;
            transition: height .2s;

            .attr-item {
                height: 38px;
                display: flex;
                overflow: hidden;
                margin-top: 10px;

                .attr-item-label {
                    padding-right: 12px;
                    line-height: 38px;
                }
                .text-four-block {
                    line-height: 38px;
                    width: calc(100% - 71px);
                }
            }
        }
    }
</style>
